<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']" :style="{padding: '10px'}">
                        <Tree :data="data1"  ref="tree4" :render="renderContent"></Tree>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Breadcrumb :style="{margin: '24px 0'}">
                      <Button type="primary" @click="modal1= true">新增数据</Button>
                      <Modal
                        v-model="modal1"
                        title="新闻信息"
                        @on-ok="ok"
                        @on-cancel="cancel">
                     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="分类编号" prop="NewsClass">
                                <Input v-model="ids" placeholder="" disabled class="NewsCid"></Input>
                            </FormItem>
                            <FormItem label="新闻类型" prop="NewsClass">
                                <Input v-model="formValidate.NewsClass" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="新闻标题" prop="NewsTitle">
                                <Input v-model="formValidate.NewsTitle" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="新闻来源" prop="NewsAddress">
                                <Input v-model="formValidate.NewsAddress" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="发布时间">
                                <Row>
                                    <Col span="12">
                                        <DatePicker type="date" v-model="formValidate.UploadTime" id="time" placeholder="Select date" style="width: 200px"></DatePicker>
                                    </Col>
                                </Row>
                            </FormItem>
                           <FormItem label="发布人" prop="Uploader">
                                <Input v-model="formValidate.Uploader" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="新闻编辑" prop="NewsAuthor">
                                <Input   v-model="formValidate.NewsAuthor" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="新闻内容" prop="NewsContent">
                                <Input v-model="formValidate.NewsContent" placeholder=""></Input>
                            </FormItem>
                           <FormItem label="更改记录" prop="UpdataRecord">
                                <Input v-model="formValidate.UpdataRecord" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="更改人员" prop="UpdataRperator">
                                <Input  v-model="formValidate.UpdataRperator" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="浏览量" prop="ViewCount">
                                <Input v-model="formValidate.ViewCount" placeholder=""></Input>
                            </FormItem>
                             <FormItem>
                                <Button type="primary" @click="handleSubmit(id)">Submit</Button>
                                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                            </FormItem>
                        </Form>
                      </Modal>
                      <Button type="warning" >批量删除</Button>
                    </Breadcrumb>
                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                        <Table border ref="selection" :columns="columns" :data="list" ></Table>
                        <Page :total="total" show-sizer   @on-change="onChangePage" :style="{margin: '24px 0'}"></Page>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    export default {
        //
         data () {
            return {
                //表单
                modal1: false,
                formValidate: {
                    NewsCid: "",
                    NewsClass: "",
                    NewsTitle: "",
                    NewsAddress: "",
                    UploadTime: "",
                    NewsContent: "",
                    NewsAuthor: "",
                    Uploader: "",
                    UpdataRecord: "",
                    UpdataRperator: "",
                    ViewCount: '',
                },
                ruleValidate: {
                    NewsCid: [
                        { required: true, message: '不能为空！！！', trigger: 'blur' }
                    ],
                    NewsClass: [
                        { required: true, message: '不能为空！！！', trigger: 'blur' },
                    ],
                    NewsTitle: [
                        { required: true, message: '不能为空！！！', trigger: 'change' }
                    ],
                    NewsAddress: [
                        { required: true, message: '不能为空！！！', trigger: 'change' }
                    ],
                    UploadTime: [
                        { required: true, type: 'date', message: '不能为空！！！', trigger: 'change' }
                    ],
                     NewsContent: [
                        { required: true, message: '不能为空！！！', trigger: 'change' }
                    ],
                    NewsAuthor:[],
                    Uploader: [
                        { required: true, message: '不能为空！！！', trigger: 'change' }
                    ],
                    UpdataRecord:[
                        { required: true, message: '不能为空！！！', trigger: 'change' }
                        ],
                    UpdataRperator:[
                        { required: true, message: '不能为空！！！', trigger: 'change' }
                        ],
                    ViewCount:[
                        { required: true, message: '不能为空！！！', trigger: 'change' }
                        ]
                    
                },
                //树形菜单
                data1: [

                ],
                //表格
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '新闻类型',
                        key: 'NewsClass'
                    },
                    {
                        title: '新闻标题',
                        key: 'NewsTitle'
                    },
                     {
                        title: '来源',
                        key: 'NewsAddress'
                    },
                    {
                        title: '发布时间',
                        key: 'UploadTime'
                    },
                    {
                        title: '发布者',
                        key: 'Uploader'
                    },
                     {
                        title: '新闻编辑',
                        key: 'NewsAuthor'
                    },
                    {
                        title: '新闻内容',
                        key: 'NewsContent'
                    },
                    {
                        title: '更改记录',
                        key: 'UpdataRecord'
                    },
                    {
                        title: '更改人员',
                        key: 'UpdataRecord'
                    },
                    {
                        title: '浏览次数',
                        key: 'UpdataRecord'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(params.row._id)
                                            this.id=params.row._id;
                                            this.modal1=true;
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                list:[],
                rows: 10,
                total:0,
                page:1,
                NewsCid:"",
                ids:"",
                id:"",
                cid:"",
            }
        },
        methods: {
            onChangePage(page){
                this.page=page;
                this.getnews(this.cid);
            },
            //获取当前点击树形图的ID，并查询出相对应新闻
            getnews(id){
                this.cid=id;
                this.axios({
                    url:"http://localhost:3000/newsManagement/query",
                    method:"post",
                    data:{
                        page:this.page,
                        rows:this.rows,
                        NewsCid:id
                    }
                }).then((res) => {
                    this.list=res.data.rows;
                    this.total=res.data.total;
                })
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                            display: 'inline-block',
                            width: "100%",
                            cursor: 'pointer'
                    },on:{
                            click: () => { 
                            console.log(data._id)
                            this.ids=data._id;
                            this.getnews(data._id)
                        }
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                ]);
            },
            //树形列表
            getTreeList(){
                this.axios({
                    url:'http://10.31.161.18:3000/cate/list/1',
                    method:'post'
                }).then(res=>{
                    this.data1=res.data;
                })
            },
            //删除
            remove(id){
                this.$Modal.confirm({
                    content: '<p><h2>警告！！！</h2></p><p><h4>是否删除此项？</h4></p>',
                    onOk: () => {
                        this.axios({
                            url:`http://localhost:3000/newsManagement/${id}`,
                            method:"delete"
                        }).then(res=>{
                            this.getnews();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            ok () {
                this.$refs.formValidate.resetFields();
                this.$Message.info('Clicked ok');

            },
            cancel () {
                this.$refs.formValidate.resetFields();
                this.$Message.info('Clicked cancel');
            },
            //表单
            handleSubmit (id) {
                this.formValidate.NewsCid=this.cid;
                        if(id==""){
                            this.axios({
                                url:"http://localhost:3000/newsManagement",
                                method:"post",
                                data:this.formValidate
                                }).then(res=>{
                                    this.getnews(this.cid);
                                    this.$refs.formValidate.resetFields();
                                    this.modal1=false;
                            })
                        }else{
                            this.axios({
                                url:`http://localhost:3000/newsManagement/${id}`,
                                method:"put",
                                data:this.formValidate
                                }).then(res=>{
                                    this.getnews(this.cid);
                                    this.$refs.formValidate.resetFields();
                                    this.modal1=false;
                            })
                        }
            },
            editData(id){
                this.axios({
                        url:`http://localhost:3000/newsManagement/${id}`,
                        method:"get"
                    }).then(res=>{
                        this.formValidate=res.data
                        this.modal1=true;
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        },
        mounted () {
          this.getTreeList();
          this.getnews();
        }

    }


</script>

